<!--
 * @Descripttion:挂账回款表格
 * @Author: 森哥
 * @Date: 2022-11-09 14:32:20
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2025-09-22 10:40:53
-->

<template>
  <div>
    <div class="onAccount-table-wrap">
      <div class="table-box">
        <el-table
          :data="tableData"
          border
          @row-click="singleElection"
          v-loading="loading"
          element-loading-text="加载中..."
        >
          <el-table-column label="" width="30">
            <template #default="scope">
              <el-radio
                class="radio"
                v-model="templateSelection"
                :label="scope.row.log_id"
                @click.stop="handleRadioClick(scope.row)"
              >
                &nbsp;
              </el-radio>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="order_id" label="账单编号"> </el-table-column>
          <el-table-column align="center" prop="name" label="账户名称 " show-overflow-tooltip>
          </el-table-column>
          <el-table-column align="center" prop="clerk.real_name" label="操作人"> </el-table-column>
          <el-table-column align="center" prop="order.user_name" label="回款人"> </el-table-column>
          <el-table-column align="center" prop="money" label="回款金额（元）"> </el-table-column>
          <el-table-column align="center" prop="describe" label="支付方式"> </el-table-column>
          <el-table-column align="center" prop="create_time" label="回款时间" show-overflow-tooltip>
          </el-table-column>
          <el-table-column align="center" label="回款状态">
            <template #default="scope">
              <span> {{ repaymentStatusEnum[scope.row.repayment_status] }}</span>
            </template>
          </el-table-column>
          <template #empty>
            <NotData />
          </template>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import NotData from '@/components/NotData/Index.vue'

interface Props {
  tableData: any[]
  loading?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  tableData: () => [],
  loading: false
})

const emit = defineEmits(['onSelectOrderId'])

// 回款状态的枚举
const repaymentStatusEnum = {
  0: '未回款',
  1: '已回款',
  2: '回款中'
}

// 选中当行表格数据
const templateSelection = ref('')

// 处理radio点击事件
const handleRadioClick = (row: any) => {
  templateSelection.value = row.log_id
  const datas = {
    ...row,
    order_id: String(row.order_id),
    log_id: String(row.log_id)
  }
  emit('onSelectOrderId', datas)
}

// 表格单选
const singleElection = (row: any) => {
  templateSelection.value = row.log_id
  const datas = {
    ...row,
    order_id: String(row.order_id),
    log_id: String(row.log_id)
  }
  emit('onSelectOrderId', datas)
}
</script>

<style lang="scss" scoped>
:deep(.el-table) {
  border-radius: 12px;
}
:deep(.el-table__body-wrapper) {
  height: 680px;
  overflow-y: auto;
}
//滚动条整体的大小
:deep(.el-table__body-wrapper::-webkit-scrollbar) {
  width: 6px !important;
  height: 0 !important;
}
//滚动条里滑动的滑块
:deep(.el-table__body-wrapper::-webkit-scrollbar-thumb) {
  height: 200px !important;
  background: #d2d2d2 !important;
  border-radius: 3px !important;
}
//滚动条底层样式
:deep(.el-table__body-wrapper::-webkit-scrollbar-track) {
  display: none !important;
}
:deep(.el-table th.el-table__cell) {
  background: #a85b62;
  color: #fff !important;
}
:deep(.el-input__inner) {
  border-radius: 12px;
}
//单选框选中的颜色
:deep(.el-radio__input.is-checked .el-radio__inner) {
  border-color: #7c0a03;
  background: #7c0a03;
}

.onAccount-table-wrap {
  width: 100%;
  background: #fff;
  border-radius: 0px 0px 0px 20px;
  box-sizing: border-box;
}
.table-box {
  width: 100%;
  border-radius: 12px;
}
.total-desc {
  margin-top: 30px;
  font-size: 14px;
  font-family:
    PingFang SC,
    PingFang SC-Regular;
  font-weight: 400;
  text-align: left;
  color: #333333;
}
</style>
